<template>
  <div >
  <div class="book-box" v-for="item in bookListData">
    <div class="book-pic">
      <router-link :to="{path: '/book/detail/'+55}"><img :src="item.image" alt="">
        <div class="book-title">{{ item.title}}</div></router-link>
      <div class="book-icon clearfix">
        <div class="icon-eye-open">sss</div>
        <div class="icon-comments-alt">评论：55555</div>
      </div>
      <div class="book-username">
        <a href=""><img :src="item.image" alt=""></a>
        <div >sss</div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
    export default {
      props: {
        bookListData: {
          type: Array,
          default() {
            return [];
          }
        }
      },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" rel="stylesheet/scss">
   .book-box{
    padding: 15px 0 0 15px;
    float: left;
    }

   .book-pic .book-newPost{
    width: 152px;
    height: 32px;
    background-color:#F6697A;
    color:white;
    text-align: center;
    line-height: 32px;
    margin: 0 auto;
    border-radius: 5px;
  ;
  }
   .book-pic{
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow:0 0  5px #ccc;
  }
   .book-pic img{
    width: 190px;
    height: auto;
  }

   .book-pic .book-title{
    width: 190px;
    color: #2BA7E7;
    margin-top: 5px;
    margin-bottom: 5px;
  }
   .book-pic .book-content{
    width: 190px;
  }
   .book-pic .book-icon{
    width: 190px;
    font-size: 14px;
    color: #87BE25;;
    div{
      float: left;
    }
  }

   .book-box .book-username{
    width: 190px;
    height: 40px;
    margin-top: 10px;
    background-color: #f0f0f0;
  }
   .book-box .book-username img{
    width: 40px;
    height: 40px;
    float: left;
    margin-right: 5px;
  }
   .book-box .book-username div{
    color: #87BE25;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
  }
   .book-pic .active{
    background-color:#87BE25;
    color:white
  }
</style>
